<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-900 text-white">
        <!-- 顶部导航 -->
        <header class="bg-gray-800 border-b border-gray-700 px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
                        <i class="fas fa-cube text-white text-lg"></i>
                    </div>
                    <h1 class="text-xl font-bold">智慧 ERP 管理系统</h1>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="relative cursor-pointer">
                        <i class="fas fa-bell text-gray-300 text-lg hover:text-white transition-colors"></i>
                        <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
                    </div>
                    <div class="flex items-center space-x-2 cursor-pointer">
                        <div class="w-8 h-8 bg-gray-600 rounded-full flex items-center justify-center">
                            <i class="fas fa-user text-sm"></i>
                        </div>
                        <span class="text-sm">管理员</span>
                    </div>
                </div>
            </div>
        </header>
        <div class="p-6">
            <!-- KPI 指标区 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-500 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-chart-line text-green-400 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-gray-400 text-sm">今日销售额</p>
                                <p class="text-2xl font-bold">¥{{ todaySales.toLocaleString() }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-green-400 text-sm">+12.5%</span>
                        <span class="text-gray-400 text-sm">较昨日</span>
                    </div>
                </div>
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-500 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-clipboard-list text-blue-400 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-gray-400 text-sm">待处理订单</p>
                                <p class="text-2xl font-bold">{{ pendingOrders }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-orange-400 text-sm">{{ urgentOrders }} 紧急</span>
                    </div>
                </div>
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-red-500 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-exclamation-triangle text-red-400 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-gray-400 text-sm">库存预警</p>
                                <p class="text-2xl font-bold">{{ lowStockItems }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-red-400 text-sm">需要补货</span>
                    </div>
                </div>
                <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-purple-500 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-target text-purple-400 text-lg"></i>
                            </div>
                            <div>
                                <p class="text-gray-400 text-sm">月度目标完成</p>
                                <p class="text-2xl font-bold">{{ monthlyProgress }}%</p>
                            </div>
                        </div>
                    </div>
                    <div class="w-full bg-gray-700 rounded-full h-2">
                        <div class="bg-purple-500 h-2 rounded-full" :style="{ width: monthlyProgress + '%' }"></div>
                    </div>
                </div>
            </div>
            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <div class="lg:col-span-2 bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                    <h3 class="text-lg font-semibold mb-4 flex items-center">
                        <i class="fas fa-chart-area text-blue-400 mr-2"></i>
                        销售趋势
                    </h3>
                    <div ref="salesChartRef" class="h-64"></div>
                </div>
                <div class="space-y-6">
                    <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                        <h3 class="text-lg font-semibold mb-4 flex items-center">
                            <i class="fas fa-boxes text-green-400 mr-2"></i>
                            库存状态
                        </h3>
                        <div ref="inventoryChartRef" class="h-32"></div>
                    </div>
                    <div class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
                        <h3 class="text-lg font-semibold mb-4 flex items-center">
                            <i class="fas fa-shopping-cart text-orange-400 mr-2"></i>
                            订单分布
                        </h3>
                        <div ref="orderChartRef" class="h-32"></div>
                    </div>
                </div>
            </div>
            <!-- 快捷功能卡片区 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <div
                    v-for="card in functionCards"
                    :key="card.id"
                    class="bg-gray-800 bg-opacity-50 backdrop-blur-sm rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition-all duration-300 cursor-pointer group hover:bg-opacity-70"
                    @click="handleCardClick(card.id)"
                >
                    <div class="flex items-center space-x-4 mb-4">
                        <div
                            class="w-12 h-12 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform duration-300"
                            :class="card.bgColor"
                        >
                            <i :class="card.icon + ' text-xl'"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold">{{ card.title }}</h3>
                            <p class="text-gray-400 text-sm">{{ card.description }}</p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-400">{{ card.count }}</span>
                        <i class="fas fa-arrow-right text-gray-400 group-hover:text-blue-400 transition-colors"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'
// 数据定义
const todaySales = ref(125680)
const pendingOrders = ref(24)
const urgentOrders = ref(5)
const lowStockItems = ref(12)
const monthlyProgress = ref(68)
// 图表引用
const salesChartRef = ref<HTMLElement>()
const inventoryChartRef = ref<HTMLElement>()
const orderChartRef = ref<HTMLElement>()
// 功能卡片数据
const functionCards = ref([
    {
        id: 'purchase',
        title: '采购管理',
        description: '采购单创建与审核',
        icon: 'fas fa-shopping-bag text-blue-400',
        bgColor: 'bg-blue-500 bg-opacity-20',
        count: '待审核: 8 单',
    },
    {
        id: 'sales',
        title: '销售管理',
        description: '订单处理与退货',
        icon: 'fas fa-chart-line text-green-400',
        bgColor: 'bg-green-500 bg-opacity-20',
        count: '今日: 32 单',
    },
    {
        id: 'products',
        title: '商品管理',
        description: '商品信息维护',
        icon: 'fas fa-cube text-purple-400',
        bgColor: 'bg-purple-500 bg-opacity-20',
        count: '总计: 1,248 个',
    },
    {
        id: 'inventory',
        title: '库存管理',
        description: '入库出库管理',
        icon: 'fas fa-warehouse text-orange-400',
        bgColor: 'bg-orange-500 bg-opacity-20',
        count: '预警: 12 个',
    },
    {
        id: 'finance',
        title: '财务管理',
        description: '收支统计分析',
        icon: 'fas fa-coins text-yellow-400',
        bgColor: 'bg-yellow-500 bg-opacity-20',
        count: '本月: ¥2.1M',
    },
    {
        id: 'reports',
        title: '系统报表',
        description: '数据分析报告',
        icon: 'fas fa-chart-bar text-indigo-400',
        bgColor: 'bg-indigo-500 bg-opacity-20',
        count: '可用: 15 个',
    },
])
// 初始化图表
const initCharts = () => {
    // 销售趋势图
    if (salesChartRef.value) {
        const salesChart = echarts.init(salesChartRef.value)
        const salesOption = {
            animation: false,
            backgroundColor: 'transparent',
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                axisLine: { lineStyle: { color: '#4b5563' } },
                axisLabel: { color: '#9ca3af' },
            },
            yAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#4b5563' } },
                axisLabel: { color: '#9ca3af' },
                splitLine: { lineStyle: { color: '#374151' } },
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true,
                    lineStyle: { color: '#3b82f6', width: 3 },
                    itemStyle: { color: '#3b82f6' },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
                                { offset: 1, color: 'rgba(59, 130, 246, 0.05)' },
                            ],
                        },
                    },
                },
            ],
        }
        salesChart.setOption(salesOption)
    }
    // 库存状态图
    if (inventoryChartRef.value) {
        const inventoryChart = echarts.init(inventoryChartRef.value)
        const inventoryOption = {
            animation: false,
            backgroundColor: 'transparent',
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    data: [
                        { value: 65, name: '正常', itemStyle: { color: '#10b981' } },
                        { value: 23, name: '偏低', itemStyle: { color: '#f59e0b' } },
                        { value: 12, name: '缺货', itemStyle: { color: '#ef4444' } },
                    ],
                    label: { color: '#9ca3af', fontSize: 12 },
                },
            ],
        }
        inventoryChart.setOption(inventoryOption)
    }
    // 订单分布图
    if (orderChartRef.value) {
        const orderChart = echarts.init(orderChartRef.value)
        const orderOption = {
            animation: false,
            backgroundColor: 'transparent',
            series: [
                {
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '50%'],
                    data: [
                        { value: 45, name: '已完成', itemStyle: { color: '#10b981' } },
                        { value: 30, name: '处理中', itemStyle: { color: '#3b82f6' } },
                        { value: 15, name: '待审核', itemStyle: { color: '#f59e0b' } },
                        { value: 10, name: '已取消', itemStyle: { color: '#6b7280' } },
                    ],
                    label: { color: '#9ca3af', fontSize: 12 },
                },
            ],
        }
        orderChart.setOption(orderOption)
    }
}
// 卡片点击处理
const handleCardClick = (cardId: string) => {
    console.log('点击了卡片:', cardId)
    // 这里可以添加路由跳转逻辑
}
onMounted(() => {
    nextTick(() => {
        initCharts()
    })
})
</script>
<style scoped>
.\!rounded-button {
    border-radius: 0.5rem;
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #374151;
}
::-webkit-scrollbar-thumb {
    background: #6b7280;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}
/* 卡片悬停效果 */
.group:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
/* 响应式调整 */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>
